<!-- templates/index.html -->
{% load static %}
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{% block specify_title %}Django + Vuetify 3 (CDN){% endblock %}</title>

    <link rel="stylesheet" href="https://fonts.bunny.net/css?family=roboto:400,500,700" />

    <!-- Material Design Icons -->
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/materialdesignicons.min.css' %}">

    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="{% static 'js/vue.global.js' %}"></script>

    <!-- Vuetify 3 -->
    <link href="https://cdn.jsdelivr.net/npm/vuetify@3.0.0/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.0/dist/vuetify.min.js"></script>

    <link rel="stylesheet" href="{% static 'css/vuetify.min.css' %}">
    <script src="{% static 'js/vuetify.min.js' %}"></script>

    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="{% static 'js/echarts.min.js' %}"></script>

    <style>
        /* 抽屉菜单项悬停效果 */
        .v-list-item {
            transition: background-color 0.2s ease;
        }

        .v-list-item:hover {
            background-color: #e3f2fd !important;

        }

        /* 可选：更明显的效果 */
        .v-list-item.active:hover {
            background-color: rgba(25, 118, 210, 0.2) !important;
        }

        .v-card-actions .v-btn {
            margin-top: 4px;
        }

        /* 子菜单项更小的字体 */
        .v-list-item.pl-8 .v-list-item-title {
            font-size: 0.95rem;
        }

        /* 悬停背景色 */
        .v-list-item:hover {
            background-color: rgba(67, 160, 71, 0.1) !important;
        }

        .chart-container {
            height: 400px;
            width: 100%;
        }

        .stat-card {
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12) !important;
        }

        .full-width-table {
            width: 100%;
        }

        /* 可选：为表格容器设置最小宽度，防止过度挤压 */
        .v-data-table {
            min-width: 800px;
        }
    </style>

</head>

<body>
    <script>

    </script>
    <div id="app">
        <!-- Vuetify 组件将在这里渲染 -->
        <v-app id="inspire">

            <v-app-bar color="primary" dark>

                <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

                <v-app-bar-title>息管理系统 </v-app-bar-title>
                <!-- Application -->
                {% if user.is_authenticated %}
                <!-- 欢迎信息 -->
                <span class="mr-2">欢迎，{{ user.username }} </span>
                <!-- 主题切换 -->
                <v-btn icon variant="text" @click="toggleTheme" title="更换主题">
                    |
                    <v-icon>mdi-theme-light-dark</v-icon>
                </v-btn>
                <v-btn icon variant="text" href="" title="退出登录">
                    |
                    <v-icon>mdi-logout</v-icon>
                </v-btn>
                {% else %}
                <!-- 登录 -->
                <span class="mr-2"> 请登录 </span>
                <v-btn icon variant="text" href="" title="欢迎登录">
                    |
                    <v-icon>mdi-login</v-icon>
                </v-btn>
                {% endif %}

            </v-app-bar>

            <v-navigation-drawer v-model="drawer">
                <!--  -->
                <v-list nav dense>
                    <v-list-item v-for="(item, index) in menuItems" :key="index" :href="item.href" :title="item.title"
                        style="color: inherit; text-decoration: none;">
                        <template v-slot:prepend>
                            <v-icon :icon="item.icon" class="mr-2"></v-icon>
                        </template>
                        <v-list-item-title>{{ item.title }}</v-list-item-title>
                    </v-list-item>
                </v-list>
            </v-navigation-drawer>



            <v-container fluid class="pa-4 pt-2">
                <v-main class="login-layout  align-center justify-center mb-1">
                    <!-- 主页面显示内容 -->
                    <v-container fluid class="pa-1">
                        <v-row class="mb-6">
                        <v-col cols="12">
                            <v-card variant="outlined">
                                <v-card-title class="d-flex justify-space-between align-center">
                                    <span>产品销售情况分析</span>
                                </v-card-title>
                                <v-card-text>
                                    <v-carousel cycle height="400" show-arrows="hover">
                                        <v-carousel-item v-for="(chart, index) in charts" :key="index">
                                            <div class="carousel-item-content">
                                                <div :id="'chart' + index" class="chart-container"></div>
                                            </div>
                                        </v-carousel-item>
                                    </v-carousel>
                                </v-card-text>
                            </v-card>
                        </v-col>
                    </v-row>
                        
                        <v-row >
                            <v-col cols="12">
                                <v-card flat variant="outlined">
                                    <v-card-title class="d-flex align-center pe-2">
                                        <v-icon icon="mdi-video-input-component"></v-icon> &nbsp;
                                        服务器信息

                                        <v-spacer></v-spacer>

                                        <v-text-field v-model="search" append-inner-icon="mdi-magnify" label="搜索"
                                            single-line density="compact" size="small" hide-details class="mr-4"
                                            style="max-width: 300px;"></v-text-field>
                                        <v-btn color="primary" @click="exportToCSV">
                                            <v-icon left>mdi-download</v-icon>
                                            导出CSV
                                        </v-btn>
                                    </v-card-title>

                                    <v-divider></v-divider>
                                    {% verbatim %}
                                    <v-data-table :headers="headers" :items="tableData" :search="search"
                                        items-per-page="8" footer-props="{
                                        'items-per-page-options': [10, 15, 20, 50, -1], 
                                        'items-per-page-text': '每页行数:' 
                                      }" menu-props="{ bottom: true, offsetY: true }" height="400" fixed-header small
                                        denity>
                                        <template v-slot:item.sales="{ item }">
                                            <v-chip color="blue" text-color="white">
                                                ¥{{ item.sales_volumne }}
                                            </v-chip>
                                        </template>
                                        <template v-slot:item.profit="{ item }">
                                            <v-chip color="green" text-color="white">
                                                ¥{{ item.sales_revenue }}
                                            </v-chip>
                                        </template>
                                        <template v-slot:item.actions="{ item }">
                                            <v-btn size="small" color="primary" variant="text"
                                                @click="viewDetails(item)">
                                                <v-icon left>mdi-eye</v-icon>
                                                查看
                                            </v-btn>
                                        </template>
                                    </v-data-table>
                                    {% endverbatim %}
                                </v-card>
                            </v-col>
                        </v-row>
                    </v-container>
                </v-main>
            </v-container>
        </v-app>
    </div>
    <script>
        const tableDataFromDjango = {{ table_data| safe }};
        // const chartDataFromDjango = {{ chart_data|safe }};
    </script>
    <script>

        const { createApp } = Vue;

        // 自定义浅色主题配置
        const myCustomLightTheme = {
            dark: false,
            colors: {
                // 主色调系列 (light-blue)
                primary: '#03a9f4',
                'primary-lighten-5': '#e1f5fe',
                'primary-lighten-4': '#b3e5fc',
                'primary-lighten-3': '#81d4fa',
                'primary-lighten-2': '#4fc3f7',
                'primary-lighten-1': '#29b6f6',
                'primary-darken-1': '#039be5',
                'primary-darken-2': '#0288d1',
                'primary-darken-3': '#0277bd',
                'primary-darken-4': '#01579b',

                // 状态颜色
                success: '#4caf50',
                'success-lighten-1': '#66bb6a',
                'success-darken-1': '#43a047',

                error: '#f44336',
                'error-lighten-1': '#ef5350',
                'error-darken-1': '#e53935',

                warning: '#ff9800',
                'warning-lighten-1': '#ffa726',
                'warning-darken-1': '#fb8c00',

                info: '#2196f3',
                'info-lighten-1': '#42a5f5',
                'info-darken-1': '#1e88e5',

                // 辅助色
                secondary: '#424242',
                'secondary-lighten-1': '#616161',
                'secondary-darken-1': '#212121',

                // 中性色
                background: '#fafafa',
                surface: '#ffffff',
                'on-primary': '#ffffff',
                'on-secondary': '#ffffff',
                'on-success': '#ffffff',
                'on-error': '#ffffff',
                'on-warning': '#ffffff',
                'on-info': '#ffffff',
                'on-background': '#000000',
                'on-surface': '#000000',
            }
        }

        // 对应的深色主题配置
        const myCustomDarkTheme = {
            dark: true,
            colors: {
                // 主色调系列 (深色下的 light-blue)
                primary: '#4fc3f7',
                'primary-lighten-1': '#81d4fa',
                'primary-lighten-2': '#b3e5fc',
                'primary-lighten-3': '#e1f5fe',
                'primary-darken-1': '#29b6f6',
                'primary-darken-2': '#039be5',
                'primary-darken-3': '#0288d1',
                'primary-darken-4': '#0277bd',

                // 状态颜色 (深色模式下适当调整亮度)
                success: '#66bb6a',
                'success-lighten-1': '#81c784',
                'success-darken-1': '#43a047',

                error: '#ef5350',
                'error-lighten-1': '#ff6b68',
                'error-darken-1': '#e53935',

                warning: '#ffa726',
                'warning-lighten-1': '#ffb74d',
                'warning-darken-1': '#fb8c00',

                info: '#42a5f5',
                'info-lighten-1': '#64b5f6',
                'info-darken-1': '#1e88e5',

                // 辅助色 (深色模式)
                secondary: '#bdbdbd',
                'secondary-lighten-1': '#e0e0e0',
                'secondary-darken-1': '#9e9e9e',

                // 深色中性色
                background: '#121212',
                surface: '#1e1e1e',
                'on-primary': '#000000',
                'on-secondary': '#000000',
                'on-success': '#000000',
                'on-error': '#ffffff',
                'on-warning': '#000000',
                'on-info': '#000000',
                'on-background': '#ffffff',
                'on-surface': '#ffffff',
            }
        }

        // 创建 Vuetify 实例
        const vuetify = Vuetify.createVuetify({
            theme: {
                defaultTheme: 'myCustomLightTheme',
                themes: {
                    myCustomLightTheme,
                    myCustomDarkTheme
                }
            }
        });

        // 创建 Vue 应用
        const app = createApp({
            // delimiter: ['[[', ']]'],
            data: () => ({
                drawer: false,
                theme: 'myCustomDarkTheme',
                menuItems: [
                    { title: '服务器', href: '/app1/index', icon: 'mdi-cog' },
                    { title: '网络设施', href: '/app2/index', icon: 'mdi-chart-bar' },
                    { title: '应用系统', href: '/app3/index', icon: 'mdi-package-variant' },
                ],
                // 数据表格设置
                tableData: tableDataFromDjango,
                search: '',
                headers: [
                    { title: 'ID', key: 'id', sortable: true },
                    { title: '产品名称', key: 'name', sortable: true },
                    { title: '类别', key: 'category', sortable: true },
                    { title: '销售额', key: 'sales', sortable: true },
                    { title: '利润', key: 'profit', sortable: true },
                    { title: '地区', key: 'region', sortable: true },
                    { title: '操作', key: 'actions', sortable: false },
                ],
            }),
            methods: {
                toggleTheme() {
                    this.theme = this.theme === 'myCustomLightTheme' ? 'myCustomDarkTheme' : 'myCustomLightTheme';
                    this.$vuetify.theme.name = this.theme;
                },
                // 方法定义
                viewDetails(item) {
                    alert(`查看产品详情: ${item.name}\n销售额: ¥${item.sales}\n利润: ¥${item.profit}`);
                },
                exportToCSV() {
                    const headers = ['ID', '产品名称', '类别', '销售额', '利润', '地区'];
                    const csvContent = [
                        headers.join(','),
                        ...this.tableData.map(row => [
                            row.id,
                            `"${row.name}"`,
                            `"${row.category}"`,
                            row.sales,
                            row.profit,
                            `"${row.region}"`
                        ].join(','))
                    ].join('\n');

                    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
                    const link = document.createElement('a');
                    const url = URL.createObjectURL(blob);

                    link.setAttribute('href', url);
                    link.setAttribute('download', '产品数据.csv');
                    link.style.visibility = 'hidden';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                },
            },
            mounted: () => { },
            beforeUnmount() { },
        });

        // 使用 Vuetify 插件
        app.use(vuetify);

        // 挂载
        app.mount('#app');
    </script>

</body>

</html>